<template>
  <!-- <page-form :x-uri="uri" :custom-components="custom" :x-tabs="tabs" :reset-btn-text="false" :save-btn-text="disableSaveBtn"></page-form> -->
  <div>
    <edu-page-tabs :tab-list="xTabs" />
    <el-form label-width="200px" size="mini">
      <el-form-item label="用户">
        <span>{{ response.user_name }}</span>
      </el-form-item>
      <el-form-item label="申请提现时间">
        <span>{{ response.create_time }}</span>
      </el-form-item>
      <el-form-item label="提现单号">
        <span>{{ response.order_no }}</span>
      </el-form-item>
      <el-form-item label="到账方式"><type :row="response" /></el-form-item>
      <el-form-item label="到账账户">
        <span v-if="response.type == 1">微信余额</span>
        <span v-else-if="response.type == 2">支付宝余额({{ response.alipay_account }})</span>
        <span v-else>账户余额</span>
      </el-form-item>
      <el-form-item label="提现金额"><money :value="response.money" /></el-form-item>

      <el-form-item label="提现状态"><status :row="response" /></el-form-item>
      <el-form-item v-if="response.status == 1">
        <el-button type="primary" :disabled="disableSubmit" @click="pass">通过</el-button>
        <el-button @click="reasonBoxVisible = true">驳回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="reasonBoxVisible" width="32%" title="驳回原因" :close-on-click-modal="false">
      <edu-textarea :value.sync="reason" :args="{ maxlength: 200, word_limit: 1, rows: 4, placeholder: '输入驳回原因' }" />
      <el-row type="flex" align="middle" justify="center" class="reason-btns">
        <el-button size="small" plain @click="reasonBoxVisible = false">取消</el-button>
        <el-button size="small" type="primary" :disabled="disableSubmit" @click="reject">驳回</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import Money from './components/form_money.vue';
import Status from './components/status.vue';
import Type from './components/type.vue';
import EduTextarea from '@public/form/textarea.vue';

export default {
  components: {
    Money,
    Status,
    Type,
    EduPageTabs,
    EduTextarea
  },
  inject: ['reload'],
  data() {
    return {
      xTabs: [
        {
          title: '待审核',
          uri: '/finance/encashment/wait',
          meta: {
            permission: 'finance.encashment.wait'
          }
        },
        {
          title: '已通过',
          uri: '/finance/encashment/done',
          meta: {
            permission: 'finance.encashment.done'
          }
        },
        {
          title: '已驳回',
          uri: '/finance/encashment/reject',
          meta: {
            permission: 'finance.encashment.reject'
          }
        },
        {
          title: '查看提现信息',
          uri: '/finance/encashment/' + this.$route.params.order_no + '/fetch',
          meta: {
            permission: 'finance.encashment'
          }
        }
      ],
      disableSubmit: false,
      reasonBoxVisible: false,
      reason: '',
      response: {}
    };
  },
  created() {
    this.$http.get(
      '/admin/finance/encashment/' + this.$route.params.order_no + '/fetch',
      {},
      response => {
        this.response = response.data;
      },
      _ => {
        this.$message.error('请求出错');
      }
    );
  },
  methods: {
    pass: function() {
      this.disableSubmit = true;
      this.$box
        .confirm('通过后将直接转账到用户的提现账户', '审核确认')
        .then(() => {
          this.$http.put(
            '/admin/finance/encashment/' + this.response.order_no + '/update',
            {
              status: 2
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {
          this.disableSubmit = false;
        });
    },
    reject: function() {
      if (!this.reason) {
        this.$message.warning('请填写驳回原因');
        return false;
      }
      this.disableSubmit = true;
      this.$http.put(
        '/admin/finance/encashment/' + this.response.order_no + '/update',
        {
          status: 3,
          reason: this.reason
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.reload();
            this.reasonBoxVisible = false;
          });
        },
        error => {
          this.disableSubmit = false;
          this.$message.error(error.msg);
        }
      );
    }
  }
};
</script>
<style scoped>
.reason-btns {
  margin-top: 20px;
}
</style>
